<template>
    <el-container>
        <el-header style="padding: 0; height: 65px;">
            <Header :selected="-1" />
        </el-header>
        <el-main id="main" style="padding: 0; width: 456px; margin: auto;">
            <div v-if="loading" class="loading-area">

            </div>
            <div v-else>
                <div class="title">
                    “{{content}}”的搜索结果
                </div>
                <AppDetailCard :hoverable="false" class="item" v-for="(item,index) in apps" :app="item" :key="index" />
            </div>
            <div class="load-more"></div>
        </el-main>
        <el-footer style="padding: 0;">
            <Footer />
        </el-footer>
    </el-container>
</template>

<script>
import { postSync } from '@/util/request'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import AppDetailCard from "@/components/AppDetailCard.vue"
let _this = null
export default {
    name: 'Top',
    components: {
        Header,
        Footer,
        AppDetailCard
    },
    data() {
        return {
            loading: true,
            content: '',
            apps: [],
            loadingMore: false,
            current: 0,
            pages: 1
        }
    },
    mounted() {
        _this = this
        _this.content = _this.$route.params.content
        console.log(_this.content)
        _this.loadMore()
        window.addEventListener('scroll', _this.scroll, false)
    },
    destroyed() {
        window.removeEventListener('scroll', _this.scroll)
    },
    methods: {
        loadMore: () => {
            if (_this.current >= _this.pages || _this.current >= 10) {
                return
            }
            ++_this.current
            _this.loadingMore = true
            const lo = _this.$loading({
                lock: true,
                spinner: 'el-icon-loading',
                background: '#fff',
                target: document.querySelector('.load-more')
            })
            postSync('/api/page/search', {
                'param': _this.content,
                'pageNum': _this.current,
                'pageSize': 25
            }).then((res) => {
                if (res.code == 200) {
                    _this.loading = false
                    let arr = res.data.data
                    for (let e in arr) {
                        _this.apps.push(arr[e])
                    }
                    _this.current = res.data.current
                    _this.pages = res.data.pages
                    _this.loadingMore = false
                    lo.close()
                }
            })
        },
        scroll() {
            let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let windowHeight = window.innerHeight
            let section = document.getElementById('main')
            let sectionTop = section.offsetTop;
            let sectionHeight = section.offsetHeight;
            if (sectionTop + sectionHeight < scroll + windowHeight) {
                if (!_this.loadingMore) {
                    _this.loadMore()
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    font-weight: 400;
    margin: 24px 0 12px;
}

.loading-area {
    height: 600px;
    border-top: 1px solid #f2f2f2;
}

.load-more {
    height: 100px;
}
</style>